/*
 * @Author: szx
 * @Date: 2020-05-11 16:50:21
 * @LastEditTime: 2022-02-13 17:17:36
 * @Description:
 * @FilePath: \learn\MDN_JS学习\照片库\main.js
 */
const displayedImage = document.querySelector('.displayed-img');
const thumbBar = document.querySelector('.thumb-bar');

const btn = document.querySelector('button');
const overlay = document.querySelector('.overlay');

/* 添加图片循环 */
for (let i = 1; i <= 5; i++) {
    const newImage = document.createElement('img');
    newImage.setAttribute('src', `images/pic${i}.jpg`);
    thumbBar.appendChild(newImage);
    newImage.onclick = (e) => {
        displayedImage.src = e.target.src;
    };
}

/* 编写 变暗/变量 按钮功能 */
btn.onclick = (e) => {
    if (btn.getAttribute('class') === 'dark') {
        btn.setAttribute('class', 'light');
        btn.textContent = '变亮';
        overlay.style.backgroundColor = 'rgba(0,0,0,0.5)';
    } else {
        btn.setAttribute('class', 'dark');
        btn.textContent = '变暗';
        overlay.style.backgroundColor = 'rgba(0,0,0,0)';
    }
};
